<template>
	<div class="legend-container">
		<div
			v-for="(item, index) in legendList"
			:key="index"
			class="legend-item"
		>
			<div :style="{ background: item.bgColor }" class="legend-item-icon"></div>
			<div>{{ item.text }}</div>
		</div>
	</div>
</template>

<script>
    import legendList from './lengend-list';

    export default {
        mixins: [legendList],
        data() {
            return {

            };
        }
    };
</script>

<style scoped lang="scss">
$legend_icon_width: 24px;
$legend_icon_height: 14px;
$legend_height: 30px;

.legend-container {
    height: $legend_height;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0;
    box-sizing: border-box;
    .legend-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin:  0 10px;
        font-size: 12px;
        .legend-item-icon {
            width: $legend_icon_width;
            height: $legend_icon_height;
            margin-right: 4px;
            background: #e8eaec;
            border-radius: 2px;
        }
    }
}
</style>
